Using Negative Values with scale() in CSS
In CSS, the scale() function resizes elements along the X and Y axes. When you use negative values in scale(), the element is not only resized but also flipped (mirrored) along the specified axis.
scale(-1)— flips the element both horizontally and vertically while keeping its original size.scaleX(-1)— flips the element horizontally (like a mirror reflection).scaleY(-1)— flips the element vertically (upside down).scale(-2)— flips and doubles the element’s size in both directions.
In this example, .box1 mirrors the element both ways, .box2 flips it horizontally, and .box3 flips it vertically. This can be useful for creating reflections or reversing animations.
Negative scaling inverts the element’s orientation — useful for mirror or reflection effects.
Combine with
transitionoranimationfor smooth flip animations.Be aware that text inside flipped elements also appears reversed.
Use
transform-originto control the flip axis (e.g., flip from the left edge instead of center).
Here, the .card flips horizontally when hovered. Adjusting the transform-origin allows control over the direction and pivot of the flip.